<template>
  <!-- locationbox位置 -->
  <div class="location-box">
    <!-- 顶部search栏 -->
    <div class="topsearch">
      <form action="/">
        <van-search
          v-model="value"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch"
          @cancel="onCancel"
        />
      </form> 
    </div>
    <!-- 当前定位 -->
    <div class="current-location">
      当前定位
    </div>
    <!-- 无法获取地址 -->
    <div class="errlocation">
      <span class="errtext">
        抱歉，无法获取定位信息
      </span>
      <span class="mylocation" >
        <van-icon name="aim" />
        <p v-on:click="errlocation">我的位置</p>
      </span>
    </div>
    <!-- 当前城市 -->
    <div class="cur-city">
      当前城市:
      <span>大通中心</span>
    </div>
    <!-- 历史城市 -->
    <div class="historycity">
      <div class="citys ">
        <span>历史城市</span>
      </div>
      <div class="citys-list">
        <ul class="citys-list" >
          <li class="my-block active">旧金山</li>
          <li class="my-block">大通中心</li>
        </ul>
      </div>
    </div>
    <!-- 热门城市 -->
    <div class="hotcitys">
      <span class="hotHeader">热门城市</span>
      <ul>
        <li class="hotlist">西安</li>
        <li class="hotlist">西安</li>
        <li class="hotlist">西安</li>
        <li class="hotlist">西安</li>
        <li class="hotlist">西安</li>
        <li class="hotlist">西安</li>
        <li class="hotlist">西安</li>
        <li class="hotlist">西安</li>
        <li class="hotlist">西安</li>
        <li class="hotlist">西安</li>
        <li class="hotlist">西安</li>
        <li class="hotlist">西安</li>
        <li class="hotlist">西安</li>
        <li class="hotlist">西安</li>
        <li class="hotlist">西安</li>
        <li class="hotlist">西安</li>
        <li class="hotlist">西安</li>
        <li class="hotlist">西安</li>
        <li class="hotlist">西安</li>
        <li class="hotlist">西安</li>
      </ul>
    </div>
    <!-- 地区选择 -->
    <van-index-bar v-for="item in citys" :key="item.letter" >
        <van-index-anchor :index="item.letter.toUpperCase()"  />
        <van-cell v-for="cityitem in item.data" :title="cityitem.name"/>
    </van-index-bar>
    
  </div>
</template>
<script>
import { Toast } from "vant";
import { Dialog } from 'vant';
import axios from "axios";

 export default {
  name: "loactionPage",
  data() {
    return {
      value: "",
      citys: [],
    };
  },
  components: {},
  mounted() {
    this.getCity()
  },
  methods: {
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      Toast("取消");
      this.$router.replace("/Hotel")
    },
    errlocation(){
      Dialog.alert({
      message: '位置共享有误，无法获取您当前的位置',
    }).then(() => {
      // on close
    });
    },
   async getCity(){
    let ok = await axios({
        url:'http://localhost:3000/city',
        method:'GET',
      }) 
      console.log(ok.data);
      this.citys = ok.data;
    }
  },
};
</script>
<style scoped>
.topsearch{
  width: 100%;
  height: 30px;
  position: fixed;
  top:0;
  left: 0;
}
.current-location{
  margin-top: 60px;
  margin-left: 5px;
  height: 40px;
  line-height: 40px;
  font-size:15px;
  box-sizing: border-box;

}
.errlocation{
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
    .errtext{
      width: 76%;
      font-size: 14px;
      color:#333;
      padding-left: 14px;
      border-right: 1px solid #d9d6d6;
    }
    .mylocation{
      text-align: center;
      padding-right: 10px;
      font-size: 13px;
      color: rgb(196, 197, 198);
    }
}
.cur-city{
  width: 95%;
  height: 40px;
  margin: 0 auto;
  border-top: 1px solid #ccc;
  color:#333;
  font-size: 14px;
  line-height: 40px;
  padding-left: 10px;
  border-bottom: 1px solid #ccc;
}
.historycity{
  width: 100%;
  height: 80px;
  box-shadow: #ccc 0px 0px 5px 0;
  .citys{
    font-size: 15px;
    padding-left: 5px;
  }
  .citys-list{
    width: 100%;
    height: 100%;
    display: flex;
    /* justify-content: space-around; */
    align-items: center;
    .active{
        border-color: #0ac4dd;
        border: 1px solid #0ac4dd;
        background: rgba(10,196,221,.1);
        color: #08b2cc;
          }
    .my-block{
        width: 80px;
        margin:0 0 8px 8px;
        display: inline-block;
        background: #f7f7f7;
        border-radius: 15px;
        font-size: 12px;
        line-height: 30px;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        border-color: #f7f7f7;
      }
  }
}
.hotcitys{
  width: 100%;
  /* background-color: #08b2cc; */
  margin-top: 10px;
  .hotHeader{
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: #2c2b2b;
    font-size: 15px;
    padding-left: 5px;
  }
    .hotlist{
        width: 80px;
        margin:0 0 8px 8px;
        display: inline-block;
        background: #f7f7f7;
        border-radius: 15px;
        font-size: 12px;
        line-height: 30px;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        border-color: #f7f7f7;
    }
    
}
</style>
